<template>
	<view class="container">
		<view class="left">
			<scroll-view
			:scroll-y="true"
			:scroll-with-animation="true"
			:scroll-into-view="clickToId"
			:style="{'height':windowHeight}">
				<view v-for="(item, index) in category" :key="index">
					<view
					:class="['title',{active:index===currentNum}]"
					:id="'to'+index"
					@click="setId(index)">
						{{item.goodsCategory}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="right">
			<scroll-view
			:scroll-into-view="clickId"
			@scroll="scroll"
			:scroll-with-animation="true"
			:scroll-y="true"
			:style="{'height':windowHeight}">
				<view v-for="(item, index) in list" :key="index">
					<view :class="[{fixed:index===currentNum}]" class="title right_title" :id="'po'+index">{{item.goodsCategory}}</view>
					<view v-for="(it, idx) in item.children" :key="idx">
						<text class="item">{{it.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const category = [
        {
            "id": "1719991122154819586",
            "goodsCategory": "蒲公英茶",
            "orderNum": 0
        },
        {
            "id": "1719991165469396994",
            "goodsCategory": "白茶",
            "orderNum": 0
        },
        {
            "id": "1719991262403956738",
            "goodsCategory": "普洱茶",
            "orderNum": 0
        },
        {
            "id": "1721421261936644098",
            "goodsCategory": "岩茶",
            "orderNum": 0
        },
        {
            "id": "1719991077485481985",
            "goodsCategory": "奶茶",
            "orderNum": 4
        },
        {
            "id": "1",
            "goodsCategory": "花茶",
            "orderNum": 6
        },
		{
		    "id": "1719991122154819586",
		    "goodsCategory": "蒲公英茶",
		    "orderNum": 0
		},
		{
		    "id": "1719991165469396994",
		    "goodsCategory": "白茶",
		    "orderNum": 0
		},
		{
		    "id": "1719991262403956738",
		    "goodsCategory": "普洱茶",
		    "orderNum": 0
		},
		{
		    "id": "1721421261936644098",
		    "goodsCategory": "岩茶",
		    "orderNum": 0
		},
		{
		    "id": "1719991077485481985",
		    "goodsCategory": "奶茶",
		    "orderNum": 4
		},
		{
		    "id": "1",
		    "goodsCategory": "花茶",
		    "orderNum": 6
		},
		{
		    "id": "1719991122154819586",
		    "goodsCategory": "蒲公英茶",
		    "orderNum": 0
		},
		{
		    "id": "1719991165469396994",
		    "goodsCategory": "白茶",
		    "orderNum": 0
		},
		{
		    "id": "1719991262403956738",
		    "goodsCategory": "普洱茶",
		    "orderNum": 0
		},
		{
		    "id": "1721421261936644098",
		    "goodsCategory": "岩茶",
		    "orderNum": 0
		},
		{
		    "id": "1719991077485481985",
		    "goodsCategory": "奶茶",
		    "orderNum": 4
		},
		{
		    "id": "1",
		    "goodsCategory": "花茶",
		    "orderNum": 6
		}
    ];
	const list = [
        {
            "id": "1719991122154819586",
            "goodsCategory": "蒲公英茶",
            "orderNum": 0,
            "children": []
        },
        {
            "id": "1719991165469396994",
            "goodsCategory": "白茶",
            "orderNum": 0,
            "children": []
        },
        {
            "id": "1719991262403956738",
            "goodsCategory": "普洱茶",
            "orderNum": 0,
            "children": []
        },
        {
            "id": "1721421261936644098",
            "goodsCategory": "岩茶",
            "orderNum": 0,
            "children": [
                {
                    "id": "1717749517746225154",
                    "goodsCode": "5",
                    "name": "天下牛",
                    "price": 688.00,
                    "virtualPrice": 788.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/320231027114416080f0fqg5.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1717808382781181953",
                    "goodsCode": "6",
                    "name": "宁宁",
                    "price": 999.00,
                    "virtualPrice": 999.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/屏幕截图 2023-03-03 21262420231027153932540wmamzy.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1719251146500796417",
                    "goodsCode": "39",
                    "name": "5",
                    "price": 5.00,
                    "virtualPrice": 5.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/tab_calendar_selected202310311511182582oedrt.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1722177232578564098",
                    "goodsCode": "16",
                    "name": "大大",
                    "price": 19.00,
                    "virtualPrice": 19.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/tab_home_selected20231108165916994ifqko6.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1722178540803035137",
                    "goodsCode": "17",
                    "name": "大大",
                    "price": 19.00,
                    "virtualPrice": 19.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/tab_home_selected20231108165916994ifqko6.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1722181392820633601",
                    "goodsCode": "18",
                    "name": "大大",
                    "price": 19.00,
                    "virtualPrice": 19.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/tab_home_selected20231108165916994ifqko6.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1722181940730978305",
                    "goodsCode": "19",
                    "name": "大大",
                    "price": 19.00,
                    "virtualPrice": 19.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/tab_home_selected20231108165916994ifqko6.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1722182589401063426",
                    "goodsCode": "20",
                    "name": "大大",
                    "price": 19.00,
                    "virtualPrice": 19.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/tab_home_selected20231108165916994ifqko6.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1722184107021885441",
                    "goodsCode": "21",
                    "name": "大大",
                    "price": 19.00,
                    "virtualPrice": 19.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/tab_home_selected20231108165916994ifqko6.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                }
            ]
        },
        {
            "id": "1719991077485481985",
            "goodsCategory": "奶茶",
            "orderNum": 4,
            "children": []
        },
        {
            "id": "1",
            "goodsCategory": "花茶",
            "orderNum": 6,
            "children": [
                {
                    "id": "1717086615434792961",
                    "goodsCode": "1",
                    "name": "奶茶杯",
                    "price": 5000.00,
                    "virtualPrice": 90.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/tab_home_selected20231025155040489ddurv4.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1717086726760009729",
                    "goodsCode": "1",
                    "name": "奶茶杯",
                    "price": 5000.00,
                    "virtualPrice": 90.00,
                    "cover": "http://121.229.102.230:39000/yds-shop/shop/tab_home_selected20231025155040489ddurv4.png",
                    "goodsCategory": null,
                    "status": 1,
                    "buyCount": null
                },
                {
                    "id": "1717380650628124674",
                    "goodsCode": "1",
                    "name": "没肉",
                    "price": 18.00,
                    "virtualPrice": 20.33,
                    "cover": "http://sdsdas",
                    "goodsCategory": null,
                    "status": 0,
                    "buyCount": null
                },
                {
                    "id": "1717747414160162817",
                    "goodsCode": "1",
                    "name": "没腻羊肉",
                    "price": 18.00,
                    "virtualPrice": 20.33,
                    "cover": "http://sdsdas",
                    "goodsCategory": null,
                    "status": 0,
                    "buyCount": 18
                },
                {
                    "id": "1",
                    "goodsCode": "123456",
                    "name": "测试",
                    "price": 1123.02,
                    "virtualPrice": 11111.22,
                    "cover": null,
                    "goodsCategory": null,
                    "status": null,
                    "buyCount": null
                }
            ]
        }
    ];
	export default {
		data() {
			return {
				category: category,
				list: list,
				windowHeight: '0px',
				clickId: '',
				clickToId:'',
				currentNum: 0,
				topList:[],
				isLeftClick:false
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			this.windowHeight = systemInfo.windowHeight + 'px';
            this.getNodesInfo();
		},
		methods: {
			setId(index) {
                this.clickId = "po" + index;
                this.isLeftClick=true;
                this.currentNum=index;
               
            },
            scroll(e){
                if(this.isLeftClick){
                    this.isLeftClick=false;
                    return;
                }
                let scrollTop=e.target.scrollTop;
                for (let i = 0; i < this.topList.length; i++) {
                    let h1=this.topList[i];
                    let h2=this.topList[i+1];
                    if(scrollTop>=h1&&scrollTop<h2){
                        this.currentNum=i;
                        this.clickToId='to'+i
                    }
                }
            },
            getNodesInfo(){
                const query = uni.createSelectorQuery().in(this);
                setTimeout(() => {
					query.selectAll('.right_title').boundingClientRect().exec((res)=>{
					    let nodes=res[0];
					    let rel=[];
					    nodes.map(item=>{
					        rel.push(item.top);
					    })
					    this.topList=rel;
						console.log(this.topList);
					});
				}, 1000)
            }
		}
	}
</script>

<style lang="scss">
.container {
	display: flex;
	
	.left {
		width: 160rpx;
		border: 1rpx solid red;

		.title {
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			color: #000000;
		}
		.active{
			background-color: #DD524D;
			color: #FFFFFF;
		}
	}

	.right {
		flex: 1;

		.title {
			color: #DD524D;
			padding: 20rpx;
			font-weight: 700;
			background-color: #FFFFFF;
		}
		
		.fixed {
			position: sticky;
			top: 0;
		}

		.item {
			width: 100%;
			height: 200rpx;
			padding-left: 20rpx;
			display: inline-block;
			background-color: antiquewhite;
			border-radius: 30rpx;
		}
	}
}
</style>
